<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信机器人管理</title>
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section-title {
            margin-top: 0;
            color: #444;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
        .qr-code {
            text-align: center;
            margin: 20px 0;
        }
        .qr-code img {
            max-width: 300px;
        }
        .config-item {
            margin-bottom: 10px;
        }
        .remove-btn {
            background-color: #f44336;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>微信机器人管理面板</h1>
        
        <div class="section">
            <h2 class="section-title">微信登录</h2>
            <div class="qr-code" id="qrCodeContainer">
                <p>请点击下方按钮获取登录二维码</p>
                <button id="getQRCode">获取二维码</button>
            </div>
            <div class="form-group">
                <button id="logoutBtn">退出登录</button>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">自动回复配置</h2>
            
            <div class="form-group">
                <label for="defaultReply">默认回复:</label>
                <input type="text" id="defaultReply" placeholder="输入默认回复内容">
            </div>
            
            <h3>好友回复配置</h3>
            <div id="friendsConfig">
                <!-- 好友配置项将通过JS动态添加 -->
            </div>
            <button id="addFriendConfig">添加好友配置</button>
            
            <h3>群聊回复配置</h3>
            <div id="groupsConfig">
                <!-- 群聊配置项将通过JS动态添加 -->
            </div>
            <button id="addGroupConfig">添加群聊配置</button>
        </div>

        <div class="section">
            <h2 class="section-title">AI模型配置</h2>
            
            <div class="form-group">
                <label>
                    <input type="checkbox" id="enableAI"> 启用AI回复
                </label>
            </div>
            
            <div class="form-group">
                <label for="aiModel">模型选择:</label>
                <select id="aiModel">
                    <option value="qwen-plus">qwen-plus</option>
                    <option value="qwen-max">qwen-max</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>
                    <input type="radio" name="aiMode" value="api" checked> API模式
                </label>
                <label>
                    <input type="radio" name="aiMode" value="local"> 本地模式
                </label>
            </div>
            
            <div class="form-group" id="apiKeyGroup">
                <label for="apiKey">API密钥:</label>
                <input type="text" id="apiKey" placeholder="输入InsCode API密钥">
            </div>
            
            <div class="form-group" id="localEndpointGroup" style="display: none;">
                <label for="localEndpoint">本地模型地址:</label>
                <input type="text" id="localEndpoint" placeholder="http://localhost:8000/v1/chat/completions">
            </div>
        </div>

        <div class="form-group">
            <button id="saveConfig">保存配置</button>
        </div>
        
        <div id="statusMessage" class="status"></div>
    </div>

    <script>
        const socket = io();
        
        // 获取当前配置
        socket.emit('get_config');
        
        // 监听配置更新
        socket.on('current_config', function(config) {
            // 更新表单中的配置值
            document.getElementById('defaultReply').value = config.default || '';
            
            // 更新好友配置
            const friendsContainer = document.getElementById('friendsConfig');
            friendsContainer.innerHTML = '';
            for (const [name, reply] of Object.entries(config.friends)) {
                addFriendConfigItem(name, reply);
            }
            
            // 更新群聊配置
            const groupsContainer = document.getElementById('groupsConfig');
            groupsContainer.innerHTML = '';
            for (const [name, reply] of Object.entries(config.groups)) {
                addGroupConfigItem(name, reply);
            }
            
            // 更新AI配置
            document.getElementById('enableAI').checked = config.ai_model.enable || false;
            document.getElementById('aiModel').value = config.ai_model.model || 'qwen-plus';
            document.getElementById('apiKey').value = config.ai_model.api_key || '';
            document.getElementById('localEndpoint').value = config.ai_model.local_endpoint || 'http://localhost:8000/v1/chat/completions';
            
            const aiMode = config.ai_model.local_mode ? 'local' : 'api';
            document.querySelector(`input[name="aiMode"][value="${aiMode}"]`).checked = true;
            updateAIModeDisplay();
        });
        
        // 监听配置保存结果
        socket.on('config_updated', function(data) {
            showStatus('配置保存成功!', 'success');
        });
        
        // 监听二维码更新
        socket.on('qr_code', function(data) {
            const qrContainer = document.getElementById('qrCodeContainer');
            qrContainer.innerHTML = `
                <p>请使用微信扫描下方二维码登录</p>
                <img src="${data.qr_code}" alt="微信登录二维码">
                <p>扫描后请稍等，登录状态将自动更新</p>
            `;
        });
        
        // 监听登录状态
        socket.on('login_status', function(data) {
            showStatus(data.message, data.status === 'success' ? 'success' : 'error');
        });
        
        // 添加好友配置项
        function addFriendConfigItem(name = '', reply = '') {
            const container = document.getElementById('friendsConfig');
            const div = document.createElement('div');
            div.className = 'config-item';
            div.innerHTML = `
                <div style="display: flex;">
                    <input type="text" placeholder="好友昵称" value="${name}" class="friend-name">
                    <input type="text" placeholder="回复内容" value="${reply}" class="friend-reply">
                    <button class="remove-btn" onclick="this.parentNode.parentNode.remove()">删除</button>
                </div>
            `;
            container.appendChild(div);
        }
        
        // 添加群聊配置项
        function addGroupConfigItem(name = '', reply = '') {
            const container = document.getElementById('groupsConfig');
            const div = document.createElement('div');
            div.className = 'config-item';
            div.innerHTML = `
                <div style="display: flex;">
                    <input type="text" placeholder="群聊名称" value="${name}" class="group-name">
                    <input type="text" placeholder="回复内容" value="${reply}" class="group-reply">
                    <button class="remove-btn" onclick="this.parentNode.parentNode.remove()">删除</button>
                </div>
            `;
            container.appendChild(div);
        }
        
        // 更新AI模式显示
        function updateAIModeDisplay() {
            const isLocal = document.querySelector('input[name="aiMode"]:checked').value === 'local';
            document.getElementById('apiKeyGroup').style.display = isLocal ? 'none' : 'block';
            document.getElementById('localEndpointGroup').style.display = isLocal ? 'block' : 'none';
        }
        
        // 显示状态消息
        function showStatus(message, type) {
            const statusDiv = document.getElementById('statusMessage');
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + type;
            setTimeout(() => {
                statusDiv.textContent = '';
                statusDiv.className = 'status';
            }, 3000);
        }
        
        // 事件监听
        document.getElementById('addFriendConfig').addEventListener('click', function() {
            addFriendConfigItem();
        });
        
        document.getElementById('addGroupConfig').addEventListener('click', function() {
            addGroupConfigItem();
        });
        
        document.getElementById('saveConfig').addEventListener('click', function() {
            // 收集配置数据
            const config = {
                friends: {},
                groups: {},
                default: document.getElementById('defaultReply').value,
                ai_model: {
                    enable: document.getElementById('enableAI').checked,
                    model: document.getElementById('aiModel').value,
                    api_key: document.getElementById('apiKey').value,
                    local_mode: document.querySelector('input[name="aiMode"]:checked').value === 'local',
                    local_endpoint: document.getElementById('localEndpoint').value
                }
            };
            
            // 收集好友配置
            document.querySelectorAll('#friendsConfig .config-item').forEach(item => {
                const name = item.querySelector('.friend-name').value;
                const reply = item.querySelector('.friend-reply').value;
                if (name && reply) {
                    config.friends[name] = reply;
                }
            });
            
            // 收集群聊配置
            document.querySelectorAll('#groupsConfig .config-item').forEach(item => {
                const name = item.querySelector('.group-name').value;
                const reply = item.querySelector('.group-reply').value;
                if (name && reply) {
                    config.groups[name] = reply;
                }
            });
            
            // 发送配置到服务器
            socket.emit('update_config', config);
        });
        
        document.getElementById('getQRCode').addEventListener('click', function() {
            socket.emit('get_qr_code');
        });
        
        document.getElementById('logoutBtn').addEventListener('click', function() {
            socket.emit('logout');
        });
        
        document.querySelectorAll('input[name="aiMode"]').forEach(radio => {
            radio.addEventListener('change', updateAIModeDisplay);
        });
        
        // 初始化显示
        updateAIModeDisplay();
    </script>
</body>
</html>